﻿<Window x:Class="DataBinding.ExpandingDataTemplate"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:DataBinding"
    Title="ExpandingDataTemplate" Height="424" Width="355"
    >
  <Window.Resources>
    <local:ImagePathConverter x:Key="ImagePathConverter"></local:ImagePathConverter>
    
    <DataTemplate x:Key="DataTemplate">
      <Grid Background="White" >
        <Grid.Style>
          <Style>
            <Setter Property="TextBlock.Foreground" Value="Black"></Setter>
          </Style>
        </Grid.Style>
      <Border Margin="5" BorderThickness="1" BorderBrush="SteelBlue"
                   Background="{Binding RelativeSource=
                          {
                             RelativeSource 
                             Mode=FindAncestor, 
                             AncestorType={x:Type ListBoxItem}
                          }, 
                          Path=Background
                         }" CornerRadius="4">
        <StackPanel Margin="3">

          <!-- This is displayed whether the ListBoxItem is selected or not. -->
          <TextBlock Text="{Binding Path=ModelName}"></TextBlock>

          <!-- This is only displayed when the ListBoxItem is selected. -->
          <StackPanel>

            <StackPanel.Style>
              <Style>                
                <Style.Triggers>
                  <DataTrigger 
                    Binding="{Binding 
                          RelativeSource=
                          {
                             RelativeSource 
                             Mode=FindAncestor, 
                             AncestorType={x:Type ListBoxItem}
                          }, 
                          Path=IsSelected
                         }" 
                    Value="False">
                    <Setter Property="StackPanel.Visibility" Value="Collapsed" />
                  </DataTrigger>
                </Style.Triggers>
              </Style>
            </StackPanel.Style>
            <TextBlock Margin="3" Text="{Binding Path=Description}" TextWrapping="Wrap"
               MaxWidth="250" HorizontalAlignment="Left"         
              FontWeight="Regular"></TextBlock>
            <Image Source="{Binding Path=ProductImagePath, Converter={StaticResource ImagePathConverter}}"></Image>
            <Button FontWeight="Regular"
            HorizontalAlignment="Right" Padding="1" 
            Tag="{Binding}">View Details...</Button>
          </StackPanel>
        </StackPanel>
      </Border>
      </Grid>
    </DataTemplate>

  </Window.Resources>


  <Grid>
    <ListBox Grid.Row="1" Margin="10" Name="lstCategories" HorizontalContentAlignment="Stretch"
             ItemTemplate="{StaticResource DataTemplate}" SnapsToDevicePixels="True">
      <ListBox.ItemContainerStyle>
        <Style>
          <Setter Property="Control.Padding" Value="0"></Setter>
          <Style.Triggers>
            <Trigger Property="ListBoxItem.IsSelected" Value="True">
              <Setter Property="Control.FontWeight" Value="Bold" />
              <Setter Property="ListBoxItem.Background" Value="LightSteelBlue" />              
            </Trigger>            
          </Style.Triggers>
        </Style>
      </ListBox.ItemContainerStyle>
    </ListBox>
    
    </Grid>
</Window>
